Namespace("sketch.ui.iphone");

(function(ui) {
    var fwk = sketch.framework;

    var TableViewCellType = {
        top:1,
        bottom:2,
        both:3
    };

    ui.iphone.TableViewCell = klass(ui.common.DockPannel, (function() {
        return {
            __type__:"ui.iphone.TableViewCell",
            _constructor:function() {
                this.properties.createProperty("grouped", "Grouped", false);
                this.properties.createProperty("cellType", "CellType", false);
                this.width(ui.iphone.SCREEN_WIDTH);
                this.height(44);
            },
            drawSelf:function(context) {
                var w = this.width(),
                    h = this.height(),
                    x = this.left(),
                    y = this.top();
                context.save();
                context.fillStyle = 'white';
                context.strokeStyle = '#A8ABAD';

                if (!this.grouped()) {
                    context.fillRect(x, y, w, h);
                    context.fillStyle = '#E0E0E0';
                    context.fillRect(x, y + h - 1, w, 1);
                } else {
                    var cellType = this.cellType();
                    if (cellType === TableViewCellType.both) {
                        context.roundedRectPath(x, y, w, h, 8, 8);
                        context.fill();
                        context.stroke();
                    } else if (cellType === TableViewCellType.top) {
                        context.rectPath(x - 2, y - 2, w + 4, h + 2);
                        context.clip();
                        context.roundedRectPath(x, y, w, h + 10, 8, 8);
                        context.fill();
                        context.stroke();
                        context.fillStyle = '#A8ABAD';
                        context.fillRect(x, y + h - 1, w, 1);
                    } else if (cellType === TableViewCellType.bottom) {
                        context.rectPath(x - 2, y, w + 4, h + 2);
                        context.clip();
                        context.roundedRectPath(x, y - 10, w, h + 10, 8, 8);
                        context.fill();
                        context.stroke();
                    } else {
                        context.fillRect(x, y, w, h);
                        context.fillStyle = '#A8ABAD';
                        context.fillRect(x, y + h - 1, w, 1);
                        context.strokeLine(x, y, x, y + h, '#A8ABAD', 1);
                        context.strokeLine(x + w, y, x + w, y + h, '#A8ABAD', 1);
                    }

                }

                context.restore();

                this.SuperKlass.drawSelf.call(this, context);
            },
            canAccept:function(element) {
                return !(element instanceof ui.iphone.TableViewCell
                    || element instanceof ui.iphone.TableViewHeader
                    || element instanceof ui.iphone.TableViewFooter);
            },
            cellType:function(value) {
                return this.properties.cellType(value);
            },
            grouped:function(value) {
                return this.properties.grouped(value);
            }
        };
    })());

    ui.iphone.TableViewHeader = klass(fwk.UIElement, (function() {
        var onStyleChanged = function() {
            if (this.grouped()) {
                this.margin(new fwk.Box(0, 6, 0, 6));
                this.font().color('#4C566C');
            } else {
                this.margin(new fwk.Box(0, 0, 0, 0));
                this.font().color('white');
            }
        };

        return {
            __type__:"ui.iphone.TableViewHeader",
            _constructor:function() {
                this.properties.createProperty("label", "Label", "Header").editorTemplate("#editor-textbox");
                this.properties.createProperty("grouped", "Grouped", false);

                var font = this.properties.createProperty("font", "Font", new fwk.Font()).editable();
                var textAlign = this.properties.createProperty("textAlign", "Text align", "left")
                    .possibleValues({'left':'Left', 'center':'Center', 'right':'Right'})
                    .useInModel()
                    .editorTemplate("#editor-dropdown");

                this.properties.bind('grouped', EventHandler(this, onStyleChanged));
                this.labelBuffer = new fwk.TextBuffer(this.boxProperties(), this.properties.label, font, textAlign);
                this.font().color('white');
                this.font().bold(true);

                this.labelBuffer.offset({x:12, y:0});

                this.width(ui.iphone.SCREEN_WIDTH);
                this.height(22);
                this._header = fwk.Resources['table_header'];
            },
            font:function(value) {
                return this.properties.font(value);
            },
            dblclick : function(event) {
                this.showInplaceEditor(this.properties.label);
            },
            drawSelf:function(context) {
                var w = this.width(),
                    h = this.height(),
                    x = this.left(),
                    y = this.top();

                if (!this.grouped()) {
                    context.save();
                    context.fillStyle = this._header.toBrush(context, 0, y, 0, y + h);
                    context.fillRect(x, y, w, h);
                    context.restore();
                }

                this.labelBuffer.draw(context);

                this.SuperKlass.drawSelf.call(this, context);
            },
            grouped:function(value) {
                return this.properties.grouped(value);
            }
        };
    })());

    ui.iphone.TableViewFooter = klass(fwk.UIElement, (function() {
        var onStyleChanged = function() {
            if (this.grouped()) {
                this.margin(new fwk.Box(0, 6, 0, 6));
                this.font().color('#4C566C');
                this.font().bold(false);
                this.labelBuffer.textAlign = 'center';
                this.labelBuffer.offset({x:0, y:0});
            } else {
                this.margin(new fwk.Box(0, 0, 0, 0));
                this.font().color('white');
                this.font().bold(true);
                this.labelBuffer.offset({x:12, y:0});
            }
        };

        return {
            __type__:"ui.iphone.TableViewFooter",
            _constructor:function() {
                this.properties.createProperty("label", "Label", "Footer").editorTemplate("#editor-textbox");
                this.properties.createProperty("grouped", "Grouped", false);
                this.properties.bind('grouped', EventHandler(this, onStyleChanged));
                var textAlign = this.properties.createProperty("textAlign", "Text align", "left")
                    .possibleValues({'left':'Left', 'center':'Center', 'right':'Right'})
                    .useInModel()
                    .editorTemplate("#editor-dropdown");
                var font = this.properties.createProperty("font", "Font", new fwk.Font()).editable();
                this.labelBuffer = new fwk.TextBuffer(this.boxProperties(), this.properties.label, font, textAlign);
                this.font().color('white');
                this.font().bold(true);

                this.labelBuffer.offset({x:12, y:0});

                this.width(ui.iphone.SCREEN_WIDTH);
                this.height(22);
                this._header = fwk.Resources['table_header'];
            },
            font:function(value) {
                return this.properties.font(value);
            }      ,
            dblclick : function(event) {
                this.showInplaceEditor(this.properties.label);
            },
            drawSelf:function(context) {
                var w = this.width(),
                    h = this.height(),
                    x = this.left(),
                    y = this.top();

                if (!this.grouped()) {
                    context.save();
                    context.fillStyle = this._header.toBrush(context, 0, y, 0, y + h);
                    context.fillRect(x, y, w, h);
                    context.restore();
                }

                this.labelBuffer.draw(context);

                this.SuperKlass.drawSelf.call(this, context);
            },
            grouped:function(value) {
                return this.properties.grouped(value);
            }
        };
    })());

    ui.iphone.TableView = klass(ui.common.StackPanel, (function() {
        var updateStyle = function() {
            var grouped = this.style() === 'grouped';
            if (grouped) {
                this.padding(new fwk.Box(10, 10, 10, 10));
            } else {
                this.padding(new fwk.Box(0, 0, 0, 0));
            }

            var prev = null;
            this.getChildren().each(function(_, element) {
                element.grouped(grouped);
                if (element instanceof ui.iphone.TableViewCell) {
                    if (prev === null || !(prev instanceof ui.iphone.TableViewCell)) {
                        element.cellType(TableViewCellType.top);
                    } else {
                        element.cellType(0);
                    }
                } else if (prev instanceof ui.iphone.TableViewCell) {
                    prev.cellType(prev.cellType() | TableViewCellType.bottom);
                }

                prev = element;
            });

            if (prev instanceof ui.iphone.TableViewCell) {
                prev.cellType(prev.cellType() | TableViewCellType.bottom);
            }

            this.performArrange();
        };
        return {
            __type__:"ui.iphone.TableView",
            _constructor:function() {
                this.properties.createProperty("style", "Style", 'plain').
                    possibleValues({'plain':'Plain', 'grouped':'Grouped'}).useInModel().editorTemplate("#editor-dropdown");

                this.properties.bind('style', EventHandler(this, updateStyle));
                this.children.changed.bind(EventHandler(this, updateStyle));

                this.width(ui.iphone.SCREEN_WIDTH);
                this.height(ui.iphone.SCREEN_WIDTH);
                this.orientation("vertical");
                this.enableGroupLocking(true);
                this.dropPositioning('vertical');
                this._background1 = fwk.Resources['table_background1'];
            },
            drawSelf:function(context) {
                var w = this.width(),
                    h = this.height(),
                    x = this.left(),
                    y = this.top();

                context.save();
                if (this.style() === 'grouped') {
                    context.drawImage(this._background1, x, y, w, h);
                } else {
                    context.fillStyle = 'rgb(250,250,250)';
                    context.fillRect(x, y, w, h);
                }
                context.restore();

                this.SuperKlass.drawSelf.call(this, context);
            },
            canAccept:function(element) {
                return element instanceof ui.iphone.TableViewCell
                    || element instanceof ui.iphone.TableViewHeader
                    || element instanceof ui.iphone.TableViewFooter;
            },
            style:function(value) {
                return this.properties.style(value);
            }
        };
    })());
})(sketch.ui);